<template>
  <transition-group
    name="breadcrumb"
    tag="Breadcrumb"
    enter-active-class="animated fadeInRight"
    leave-active-class="animated fadeOutRight"
  >
    <BreadcrumbItem
      v-for="(item, index) in breadcrumb"
      :key="item.icon + index"
      class="breadcrumb-item"
    >
      <i
        v-if="item.icon"
        class="material-icons"
      >{{ item.icon }}</i>
      <template v-if="Array.isArray(item.title)">
        <span
          v-for="(t, i) in item.title"
          :key="t.content + i"
        >
          <router-link
            :to="t.route"
          >
            {{ t.content }}
          </router-link>
          <template v-if="i !== item.title.length-1">
            &
          </template>
        </span>
      </template>
      <template v-else>
        <router-link
          :to="item.title.route"
        >
          {{ item.title.content }}
        </router-link>
      </template>
    </BreadcrumbItem>
  </transition-group>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { LayoutModule } from '@/store/modules/layout'

@Component({
  name: 'LayoutBreadcrumb'
})
export default class extends Vue {
  get breadcrumb () {
    return LayoutModule.breadcrumb
  }
}
</script>

<style lang="less" scoped>
.breadcrumb-item * {
  line-height: 1.5;
  vertical-align: middle;
  text-align: center;
}
</style>
